// 引入 阿里矢量图标
import { createFromIconfontCN } from "@ant-design/icons";
// 引入复选框
import { Checkbox, Stepper, SwipeAction, Space } from "antd-mobile";
import { Action, SwipeActionRef } from "antd-mobile/es/components/swipe-action";
// 引入路由方法
import { useNavigate } from "react-router-dom";
// 引入 useEffect
import { useEffect, useState } from "react";
// 引入 axios 方法
import { getCart, delCart, addCart } from "../../../api/admin";
import { FC } from "react";
// 引入 css 样式
import "./index.css";
let IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4148694_v0hr188vut.js",
});
interface CartProps {}

const Cart: FC<CartProps> = () => {
  const navigate = useNavigate();
  const jump = () => {
    navigate(-1);
  };

  // 保存购物车商品数据
  const [cartDetail, setcartDetailProps] = useState<any[]>([]);
  // 保存购物车商品数据
  const [checkboxs, setcheckboxs] = useState<number[]>([]);
  const [value, setValue] = useState<number[]>([]);
  console.log(checkboxs, value);
  useEffect(() => {
    getCart().then((res) => {
      // 将购物车商品 id 传入到数组当中
      setcheckboxs(res.data.data.map((item: any) => item.id));
      setcartDetailProps(res.data.data);
      console.log(res);
    });
  }, []);

  // 设置第三方变量存储商品的数量
  const [Num, setNum] = useState<number>(0);
  // 总价
  const total = (v: any) => {
    console.log(v);

    if (v) {
      cartDetail.map((item) => {
        setSum(item.price * item.amount + sum);
      });
      console.log(sum);
    }
  };

  const [sum, setSum] = useState(0);
  console.log(sum);
  return (
    <>
      <div className="Cart">
        {/* 购物车头部 */}
        <div className="CartHeader">
          <span onClick={jump}>
            <IconFont type="icon-31fanhui1" />
          </span>
          <p>购物车</p>
          <span>
            <IconFont type="icon-gengduo" />
          </span>
        </div>
        {/* 购物车商品 */}
        <div className="Shopping">
          {cartDetail.map((item) => (
            <SwipeAction
              key={item.id}
              rightActions={[
                {
                  key: "delete",
                  text: "删除",
                  color: "danger",
                  onClick: () =>
                    delCart(item.id).then((res) => {
                      console.log(res);
                      getCart().then((res) => {
                        console.log(res.data.data);
                        setcartDetailProps(res.data.data);
                      });
                    }),
                },
              ]}
            >
              <li key={item.product.id}>
                {/* 单选 */}
                <Checkbox.Group
                  value={value}
                  onChange={(v) => {
                    setValue(v as number[]);
                  }}
                >
                  <Space direction="vertical">
                    <Checkbox
                      onChange={(e) => {
                        let a = item.price * item.amount;
                        if (e) {
                          setSum(sum + a);
                        } else {
                          setSum(sum - a);
                        }
                      }}
                      key={item.id}
                      value={item.id}
                    ></Checkbox>
                  </Space>
                </Checkbox.Group>
                <img src={item.product.coverImage} alt="" />
                <div className="top">
                  <p>{item.product.name}</p>
                  <span>x{item.amount}</span>
                  <b>￥{item.price}</b>
                  {/* 步进器 */}
                  <Stepper
                    defaultValue={item.amount}
                    min={0}
                    max={item.product.amount}
                    onChange={(value) => {
                      console.log(value);

                      if (value > Num) {
                        console.log("++");
                        // addCart({product:item.product.id,price:item.orice,amount:'1'}).then(res=>{
                        //   console.log(res);
                        //  })
                      }
                      if (value < item.amount) {
                        console.log("--");
                        // addCart({product:item.product.id,price:item.orice,amount:'-1'}).then(res=>{
                        //   console.log(res);
                        //  })
                      }
                    }}
                  />
                </div>
              </li>
            </SwipeAction>
          ))}
        </div>
        {/* 购物车底部 */}
        <div className="CartFooter">
          <Checkbox
            defaultChecked={true}
            indeterminate={value.length > 0 && value.length < checkboxs.length}
            checked={value.length === checkboxs.length}
            onChange={(checked) => {
              if (checked) {
                setValue(checkboxs);
                total(checked);
              } else {
                setValue([]);
              }
            }}
          >
            全选
          </Checkbox>
          <p>
            <span>合计：</span>
            <span className="shoppingPrice">￥{sum}</span>
          </p>
          <button>结算</button>
        </div>
      </div>
    </>
  );
};

export default Cart;
